<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户管理 会员购物车</title>
<link href="${rc.contextPath}/assets/css/bootstrap.min.css"
	rel="stylesheet" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/font-awesome.min.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/daterangepicker.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ui.jqgrid.css" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" />
<!-- ace settings handler -->
<script src='${rc.contextPath}/assets/js/jquery-2.0.3.min.js'></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->

<script src="${rc.contextPath}/assets/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<!-- ace scripts -->
<script
	src="${rc.contextPath}/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<!-- <script src="${rc.contextPath}/common/js/common.js"></script>
<script src="${rc.contextPath}/common/js/thickbox/thickbox.js"></script>
<script src="${rc.contextPath}/common/js/config.js"></script> --><!-- 
<script
	src="${rc.contextPath}/common/js/market/customer/customer_details.js"></script> -->

<script src="${rc.contextPath}/assets/js/jquery.slimscroll.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.sparkline.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.resize.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
<script
	src="${rc.contextPath}/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.validate.min.js"></script>
<script src="${rc.contextPath}/assets/js/date-time/moment.min.js"></script>
<link href="${rc.contextPath}/common/css/common/commonnew.css"rel="stylesheet" type="text/css" />
<script>
var deptJson = $deptJson;
</script>

<body>
	<div class="main-container">
		<div class="page-content">

			<div class="page-header">
				当前位置 <i class="icon-double-angle-right"></i> 客户管理 <small> <i
					class="icon-double-angle-right"></i> 会员购物车
				</small>
				<p style="float: right">姓名： $!{currentUser.ename}</p>
			</div>

			<form class="form-horizontal" id="validation-form" method="post"
				action="${rc.contextPath}/cart/showShopCart">
				<div class="form-group">
					<label class="control-label col-sm-1 " for="agentCode">会员号:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="agentCode" id="agentCode"
								class="form-control input-sm" value="$!{customerContact.uname}" />
						</div>
					</div>

					<label class="control-label col-sm-2" for="id-date-range-picker-1">加入购物车日期:</label>
					<div class="col-sm-3">
						<div class="clearfix">
							<div class="input-group">
								<span class="input-group-addon"> <i
									class="icon-calendar bigger-110"></i>
								</span> <input class="form-control input-sm" type="text"
									name="operateTime" id="id-date-range-picker-1" />
							</div>
						</div>
					</div>
				</div>

				<div class="col-sm-offset-4">
					<button type="button" class="btn btn-primary" id="queryButton">查询</button>
					&nbsp;&nbsp;
					<button type="reset" class="btn btn-inverse">重置</button>
				</div>
			</form>
			<div id="dialog" class="hide"></div>
			<hr />
			<table id="grid-table"></table>

			<div id="grid-pager"></div>
		</div>
	</div>
	<script type="text/javascript">
		try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
	</script>
	<script type="text/javascript">
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		var column = '["会员号","商品名称","年限","分公司","操作时间"]';
		var columnCode = [{"name":"agentCode","width":40}, 
		                  {"name":"goodsName","width":60}, 
		                  {"name":"purchaseTime","width":30},
		                  {"name":"companyName","width":40},
		                  {"name":"operateTime","width":50} ];
		var url = "${rc.contextPath}/cart/showShopCart";
		column = jQuery.parseJSON(column);
		postData = jQuery.parseJSON('{"customId":"hy278480"}');
		$("#queryButton").click(function() {
			var agentCode=$("#agentCode").val();
			var operateTime=$("#id-date-range-picker-1").val();
            $(grid_selector).jqGrid('setGridParam',{
            	postData:{"agentCode":agentCode},
            	page:1,
            	rows:10
        	}).trigger('reloadGrid'); 
		});
		$('input[name=operateTime]').daterangepicker(
				{
					format:'YYYY-MM-DD',
					separator : ' 到 ',
					language:"cn",
					/* dateLimit : {
                        days : 30
                    }, */ //起止时间的最大间隔
                    ranges : {
                        //'最近1小时': [moment().subtract('hours',1), moment()],
                        '今日': [moment().startOf('day'), moment()],
                        '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                        '最近7日': [moment().subtract('days', 6), moment()],
                        '最近30日': [moment().subtract('days', 29), moment()]
                    },
                    opens : 'right', //日期选择框的弹出位置
                    locale : {
                        applyLabel : '确定',
                        cancelLabel : '取消',
                        fromLabel : '起始时间',
                        toLabel : '结束时间',
                        customRangeLabel : '选择时间',
                        daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                        monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                            '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                        firstDay : 1
                    }
				}
		).prev().on(ace.click_event, function(){
			$(this).next().focus();
		}); 
			//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
						.wrap('<label class="inline" />')
					.addClass('ace ace-switch ace-switch-5')
					.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
						.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
			}, 0);
		}
		function style_edit_form(form) {
			//enable datepicker on "sdate" field and switches for "stock" field
			form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
				.end().find('input[name=stock]')
					  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
	
			//update buttons classes
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
			buttons.eq(1).prepend('<i class="icon-remove"></i>')
			
			buttons = form.next().find('.navButton a');
			buttons.find('.ui-icon').remove();
			buttons.eq(0).append('<i class="icon-chevron-left"></i>');
			buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
		}
	
		function style_delete_form(form) {
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
			buttons.eq(1).prepend('<i class="icon-remove"></i>')
		}
		
		function style_search_filters(form) {
			form.find('.delete-rule').val('X');
			form.find('.add-rule').addClass('btn btn-xs btn-primary');
			form.find('.add-group').addClass('btn btn-xs btn-success');
			form.find('.delete-group').addClass('btn btn-xs btn-danger');
		}
		function style_search_form(form) {
			var dialog = form.closest('.ui-jqdialog');
			var buttons = dialog.find('.EditTable')
			buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
			buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
			buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
		}
		
		function beforeDeleteCallback(e) {
			var form = $(e[0]);
			if(form.data('styled')) return false;
			
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_delete_form(form);
			
			form.data('styled', true);
		}
		
		function beforeEditCallback(e) {
			var form = $(e[0]);
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_edit_form(form);
		}
	
	
	
		//it causes some flicker when reloading or navigating grid
		//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
		//or go back to default browser checkbox styles for the grid
		function styleCheckbox(table) {
		/**
			$(table).find('input:checkbox').addClass('ace')
			.wrap('<label />')
			.after('<span class="lbl align-top" />')
	
	
			$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
			.find('input.cbox[type=checkbox]').addClass('ace')
			.wrap('<label />').after('<span class="lbl align-top" />');
		*/
		}
		
	
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			/**
			var replacement = 
			{
				'ui-icon-pencil' : 'icon-pencil blue',
				'ui-icon-trash' : 'icon-trash red',
				'ui-icon-disk' : 'icon-ok green',
				'ui-icon-cancel' : 'icon-remove red'
			};
			$(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
			*/
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
				'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
				'ui-icon-seek-next' : 'icon-angle-right bigger-140',
				'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
		
		function makegrid(postData){
			jQuery(grid_selector).jqGrid({
				url : url,
				
				mtype : "POST",
				contentType : "application/json",
				datatype : "json",
				height: 350,
				autowidth:true,
				colNames:column,
				colModel:columnCode,
				
				viewrecords : true,
				rowNum:10,
				rowList:[10,30,50],
				pager : pager_selector,
				emptyrecords: "没有查到相关数据！", 
				pgtext : "第{0}页，总共{1}页", 
				recordtext : "查看 {0} - {1}条记录， 总记录数 {2}",
				loadtext:"加载中，请稍候...",
				altRows: true,
				autowidth:true,
				shrinkToFit: true,
				scrollrows: false,
				jsonReader : {
				      root:"records",
				      page: "pageNow", //当前页
				      total: "pageCount", //总页数
				      records: "rowCount"//总记录数
				},
				 loadComplete : function() {
					var table = this;
					$("#id").setGridWidth($(window).width()*0.98);　
					setTimeout(function(){
						//styleCheckbox(table);
						//updateActionIcons(table);
						updatePagerIcons(table);
						//enableTooltips(table);
					}, 0);
				},
			});
		}
		
		makegrid(postData);
		
	</script>
</body>
</html>
